<template>
  <div class="app-container home">
    <div class="main-title">信息填报数量</div>
    <div class="data-list">
      <div class="data-item">
        <div class="title">今日</div>
        <div class="num-list">
          <div class="num-item">
            <div class="num">{{affairNum.dayred||0}}</div>
            <div class="text">（红事）</div>
          </div>
          <div class="num-item">
            <div class="num">{{affairNum.daywhite||0}}</div>
            <div class="text">（白事）</div>
          </div>
        </div>
      </div>
      <div class="data-item">
        <div class="title">本月统计</div>
        <div class="num-list">
          <div class="num-item">
            <div class="num">{{affairNum.monthred||0}}</div>
            <div class="text">（红事）</div>
          </div>
          <div class="num-item">
            <div class="num">{{affairNum.monthwhite||0}}</div>
            <div class="text">（白事）</div>
          </div>
        </div>
      </div>
      <div class="data-item">
        <div class="title">累计</div>
        <div class="num-list">
          <div class="num-item">
            <div class="num">{{affairNum.Allred||0}}</div>
            <div class="text">（红事）</div>
          </div>
          <div class="num-item">
            <div class="num">{{affairNum.Allwhite||0}}</div>
            <div class="text">（白事）</div>
          </div>
        </div>
      </div>
    </div>
    <el-form :model="queryParams" ref="queryForm" :inline="true" size="small" label-width="68px">
      <el-form-item label="地区" prop="place">
        <el-cascader v-model="queryParams.place" :props="props"></el-cascader>
      </el-form-item>
      <el-form-item label="时间" prop="userName">
        <el-date-picker v-model="queryParams.date" type="datetimerange" align="right" unlink-panels range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="initEchart">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="echart-data" ref="echart"></div>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  import {
    GetAffairNum,
    getRegionsById,
    GetVillageNum
  } from '@/api/index.js'
  let id = 0
  export default {
    name: "Index",
    data() {
      return {
        affairNum: {},
        queryParams: {
          place: ['1491669179554595370'],
          date: null
        },
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        props: {
          lazy: true,
          lazyLoad(node, resolve) {
            const {
              level
            } = node;
            // node.value
            getRegionsById('1491669179554595370').then((res) => {
              let data = res.data.map((item) => {
                return {
                  value: item.deptId,
                  label: item.name,
                  leaf: level >= 0
                }
              })
              resolve(data);
            })
            // debugger
            // const {
            //   level
            // } = node;
            // setTimeout(() => {
            //   const nodes = Array.from({
            //       length: level + 1
            //     })
            //     .map(item => ({
            //       value: ++id,
            //       label: `选项${id}`,
            //       leaf: level >= 3
            //     }));
            //   // 通过调用resolve将子节点数据返回，通知组件数据加载完成
            //   resolve(nodes);
            // }, 1000);
          }
        }
      };
    },
    mounted() {
      this.initNum()
      this.initEchart()

    },
    methods: {
      initNum() {
        GetAffairNum().then((res) => {
          this.affairNum = res.data
        })
      },
      initEchart() {
        let params = {
          id: this.queryParams.place[this.queryParams.place.length - 1],
          begin: this.queryParams.date ? new Date(this.queryParams.date[0]).getTime() : '',
          end: this.queryParams.date ? new Date(this.queryParams.date[1]).getTime() : '',
        }
        // console.log(params)
        GetVillageNum(params).then((res) => {
          let data = res.data
          let xAxis = []
          let red = []
          let white = []
          data = data.map((item) => {
            xAxis.push(item.name)
            red.push(item.red)
            white.push(item.white)
            return item
          })
          echarts.init(this.$refs.echart).setOption({
            color: ['#ee284c', '#5d5f7e'],
            legend: {
              data: ['红事', '白事']
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross'
              }
            },
            xAxis: {
              type: 'category',
              data: xAxis
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              name: '红事',
              data: red,
              type: 'bar',
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
              }
            }, {
              name: '白事',
              data: white,
              type: 'bar',
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
              }
            }]
          })
        })
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.queryParams = {
          place: ['1491669179554595370'],
          date: null
        }
        this.initEchart();
      },
    },
  };
</script>

<style scoped lang="scss">
  .main-title {
    font-weight: bold;
    margin-bottom: 24px;
  }

  .echart-data {
    height: 500px;
  }

  .data-list {
    display: flex;
    margin-bottom: 50px;

    .data-item {
      flex: 0 0 300px;
      margin-right: 32px;
      padding: 24px;
      background-color: #ffffff;
      box-shadow: 0 0 12px 0px #bbbbbb;
      border-radius: 6px;

      .title {
        margin-bottom: 12px;
      }

      .num-list {
        display: flex;

        .num-item {
          flex: 1;
          display: flex;
          align-items: flex-end;

          .num {
            font-size: 32px;
            height: 26px;
            line-height: 32px;
          }

          .text {
            font-size: 16px;
            height: 16px;
            line-height: 16px;
          }
        }
      }
    }
  }
</style>
